// 分页示例组件
<template>
  <div class="table-demo">
    <el-table
      :data="tableData"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="180"
      />
      <el-table-column
        prop="name"
        label="Name"
        width="180"
      />
      <el-table-column
        prop="description"
        label="Description"
      />
    </el-table>

    <ElPaginationWrapper
      v-model:page="queryParams.page"
      v-model:limit="queryParams.limit"
      :total="total"
      @pagination="handlePaginationChange"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'

  interface TableItem {
    id: number
    name: string
    description: string
  }

  // 查询参数
  const queryParams = reactive({
    page: 1,
    limit: 10,
  })

  // 表格数据
  const tableData = ref<TableItem[]>([])
  const total = ref(0)
  const loading = ref(false)

  // 模拟获取数据的函数
  const fetchData = async (params: { page: number; limit: number }) => {
    loading.value = true
    try {
      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 500))

      // 模拟数据
      const mockData: TableItem[] = Array.from({ length: params.limit }, (_, index) => {
        const itemIndex = (params.page - 1) * params.limit + index + 1
        return {
          id: itemIndex,
          name: `Item ${itemIndex}`,
          description: `Description for item ${itemIndex}`,
        }
      })

      tableData.value = mockData
      total.value = 100 // 模拟总数据量
    } finally {
      loading.value = false
    }
  }

  // 分页变化处理
  const handlePaginationChange = (params: { page: number; limit: number }) => {
    fetchData(params)
  }

  // 初始化加载数据
  onMounted(() => {
    fetchData(queryParams)
  })
</script>

<style scoped>
  .table-demo {
    padding: 20px;
  }
</style>
